<template>
  <v-dialog v-model="show" width="400" persistent>
    <v-card>
      <v-card-title> 回答 </v-card-title>

      <v-divider></v-divider>

      <v-card-text style="padding: 24px;">

        <v-textarea
          v-model="answer"
          label="请输入答案"
          :placeholder="history.question"
          outlined
          color="#0c422e"
        ></v-textarea>

      </v-card-text>

      <v-divider></v-divider>

      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn color="#0c422e" text @click="onCancel"> 取消 </v-btn>
        <v-btn color="#0c422e" text @click="onConfirm"> 确认 </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script lang="ts">
import { Component, Prop, PropSync, Vue } from "vue-property-decorator";
import { HistoryService } from "@/services/history.service";

@Component({
  name: "AnswerDialog"
})
export default class AnswerDialog extends Vue {
  @PropSync("showAnswerDialog", { type: Boolean, default: false }) show!: boolean;
  @Prop(Object) history!: any;

  answer: string = ""

  onConfirm() {
    HistoryService.answer(this.history.id, this.answer).then((res: any) => {
      if (res.result) {
        this.$router.go(0);
      }
    }).catch(() => {});
  }

  onCancel() {
    this.show = false;
    this.answer = "";
  }

};
</script>

<style scoped>

</style>
